<!DOCTYPE html>
<html>
    <head>
        <title>flipswitch组件</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"/>
        <script src="../avalon.js"></script>
        <script src="../highlight/shCore.js"></script>
        <script>
            require(["flipswitch/avalon.flipswitch"], function() {
                avalon.define("test", function(vm) {
                    vm["flipswitch"] = {
                    }
                    vm.$skipArray = ["flipswitch"]
                })
                avalon.scan()
            })
        </script>
    </head>
    <body>
<div ms-controller="test">
        <h1>不同大小size，通过接口修改状态，选中状态</h1>
        <div>
            <p>---------size=mini---------</p>
            <div class="this-for-test-3">
                <input checked="checked" type="checkbox" ms-widget="flipswitch" data-flipswitch-size="mini">
            </div>
            <p>---------size=small---------</p>
            <div class="this-for-test">
                <input checked="checked" type="checkbox" ms-widget="flipswitch,$cc" data-flipswitch-size="small">
                <input type="button" value="Toggle" onclick="avalon.vmodels.$cc.toggleStatus()">
            </div>
            <p>---------size=normal---------</p>
            <div class="this-for-test-4">
                <input checked="checked" type="checkbox" ms-widget="flipswitch,$dd" data-flipswitch-size="normal">
                <input type="button" value="disable" onclick="avalon.vmodels.$dd.disable()">
                <input type="button" value="enable" onclick="avalon.vmodels.$dd.enable()">
            </div>
            <p>---------size=large---------</p>
            <div class="this-for-test-2">
                <input checked="checked" type="checkbox" ms-widget="flipswitch" data-flipswitch-size="large">
            </div>
            <p>------------------</p>
        </div>
        <pre ms-skip class="brush:html;gutter:false;toolbar:false">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;flipswitch组件&lt;/title&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            
        &lt;/style&gt;
        &lt;script src=&quot;../avalon.js&quot;&gt;&lt;/script&gt;
        
        &lt;script&gt;
            require([&quot;flipswitch/avalon.flipswitch&quot;], function() {
                avalon.define(&quot;test&quot;, function(vm) {
                    vm[&quot;flipswitch&quot;] = {
                    }
                    vm.$skipArray = [&quot;flipswitch&quot;]
                })
                avalon.scan()
            })
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
&lt;div ms-controller=&quot;test&quot;&gt;
        &lt;h1&gt;不同大小size，通过接口修改状态，选中状态&lt;/h1&gt;
        &lt;div&gt;
            &lt;p&gt;---------size=mini---------&lt;/p&gt;
            &lt;div class=&quot;this-for-test-3&quot;&gt;
                &lt;input checked=&quot;checked&quot; type=&quot;checkbox&quot; ms-widget=&quot;flipswitch&quot; data-flipswitch-size=&quot;mini&quot;&gt;
            &lt;/div&gt;
            &lt;p&gt;---------size=small---------&lt;/p&gt;
            &lt;div class=&quot;this-for-test&quot;&gt;
                &lt;input checked=&quot;checked&quot; type=&quot;checkbox&quot; ms-widget=&quot;flipswitch,$cc&quot; data-flipswitch-size=&quot;small&quot;&gt;
                &lt;input type=&quot;button&quot; value=&quot;Toggle&quot; onclick=&quot;avalon.vmodels.$cc.toggleStatus()&quot;&gt;
            &lt;/div&gt;
            &lt;p&gt;---------size=normal---------&lt;/p&gt;
            &lt;div class=&quot;this-for-test-4&quot;&gt;
                &lt;input checked=&quot;checked&quot; type=&quot;checkbox&quot; ms-widget=&quot;flipswitch,$dd&quot; data-flipswitch-size=&quot;normal&quot;&gt;
                &lt;input type=&quot;button&quot; value=&quot;disable&quot; onclick=&quot;avalon.vmodels.$dd.disable()&quot;&gt;
                &lt;input type=&quot;button&quot; value=&quot;enable&quot; onclick=&quot;avalon.vmodels.$dd.enable()&quot;&gt;
            &lt;/div&gt;
            &lt;p&gt;---------size=large---------&lt;/p&gt;
            &lt;div class=&quot;this-for-test-2&quot;&gt;
                &lt;input checked=&quot;checked&quot; type=&quot;checkbox&quot; ms-widget=&quot;flipswitch&quot; data-flipswitch-size=&quot;large&quot;&gt;
            &lt;/div&gt;
            &lt;p&gt;------------------&lt;/p&gt;
        &lt;/div&gt;
        
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
    </div>
</body>
</html>
